<template>
  <div>
    <el-row :gutter="18">
      <el-form ref="dyxxform" :model="dyxxform" :rules="rules" size="medium" label-width="200px">
        <el-col :span="12">
          <el-form-item label="抵押合同号" prop="dyhth">
            <el-input v-model="dyxxform.dyhth" placeholder="请输入抵押合同号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="借款合同号" prop="jkhth">
            <el-input v-model="dyxxform.jkhth" placeholder="请输入借款合同号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抵押方式" prop="dyfs">
            <el-select v-model="dyxxform.dyfs" placeholder="请选择抵押方式" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in dyfsOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抵押顺序号" prop="dysxh">
            <el-select v-model="dyxxform.dysxh" placeholder="请选择抵押顺序号" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in dysxhOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="抵押评估金额（元）" prop="dypgje">
            <el-input v-model="dyxxform.dypgje" placeholder="请输入抵押评估金额" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="被担保主债权数额（元）" prop="bdbzzqse">
            <el-input v-model="dyxxform.bdbzzqse" placeholder="请输入被担保主债权数额" clearable
              :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="最高债权数额（元）" prop="zgzqse">
            <el-input v-model="dyxxform.zgzqse" placeholder="请输入最高债权数额" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="债务人" prop="zwr">
            <el-input v-model="dyxxform.zwr" placeholder="请输入债务人" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抵押范围" prop="dyfw">
            <el-select v-model="dyxxform.dyfw" placeholder="请选择抵押范围" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in dyfwOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="贷款类型" prop="dklx">
            <el-select v-model="dyxxform.dklx" placeholder="请选择贷款类型" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in dklxOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最高债权确定事实" prop="zgzqqdss">
            <el-select v-model="dyxxform.zgzqqdss" placeholder="请选择最高债权确定事实" clearable
              :style="{width: '100%'}">
              <el-option v-for="(item, index) in zgzqqdssOptions" :key="index" :label="item.label"
                :value="item.value" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="不动产类型" prop="bdclx">
            <el-input v-model="dyxxform.bdclx" placeholder="请选择不动产类型" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抵押起始日期" prop="dyqsrq">
            <el-date-picker v-model="dyxxform.dyqsrq" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{width: '100%'}" placeholder="请选择抵押起始日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="抵押截止日期" prop="dyjzrq">
            <el-time-picker v-model="dyxxform.dyjzrq" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :picker-options='{"selectableRange":"00:00:00-23:59:59"}' :style="{width: '100%'}"
              placeholder="请选择抵押截止日期" clearable></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="抵押附记" prop="dyfj">
            <el-input v-model="dyxxform.dyfj" type="textarea" placeholder="请输入抵押附记"
              :autosize="{minRows: 2, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      dyxxform: {
        dyhth: '',
        jkhth: '',
        dyfs: '',
        dysxh: '',
        dypgje: '',
        bdbzzqse: '',
        zgzqse: '',
        zwr: '',
        dyfw: '',
        dklx: '',
        zgzqqdss: '',
        bdclx: '',
        dyqsrq: null,
        dyjzrq: null,
        dyfj: '',
      },
      rules: {
        dyhth: [{
          required: true,
          message: '请输入抵押合同号',
          trigger: 'blur'
        }],
        jkhth: [{
          required: true,
          message: '请输入借款合同号',
          trigger: 'blur'
        }],
        dyfs: [{
          required: true,
          message: '请选择抵押方式',
          trigger: 'change'
        }],
        dysxh: [{
          required: true,
          message: '请选择抵押顺序号',
          trigger: 'change'
        }],
        dypgje: [{
          required: true,
          message: '请输入抵押评估金额',
          trigger: 'blur'
        }],
        bdbzzqse: [{
          required: true,
          message: '请输入被担保主债权数额',
          trigger: 'blur'
        }],
        zgzqse: [{
          required: true,
          message: '请输入最高债权数额',
          trigger: 'blur'
        }],
        zwr: [{
          required: true,
          message: '请输入债务人',
          trigger: 'blur'
        }],
        dyfw: [{
          required: true,
          message: '请选择抵押范围',
          trigger: 'change'
        }],
        dklx: [{
          required: true,
          message: '请选择贷款类型',
          trigger: 'change'
        }],
        zgzqqdss: [{
          required: true,
          message: '请选择最高债权确定事实',
          trigger: 'change'
        }],
        bdclx: [{
          required: true,
          message: '请选择不动产类型',
          trigger: 'blur'
        }],
        dyqsrq: [{
          required: true,
          message: '请选择抵押起始日期',
          trigger: 'change'
        }],
        dyjzrq: [{
          required: true,
          message: '请选择抵押截止日期',
          trigger: 'change'
        }],
        dyfj: [{
          required: true,
          message: '请输入抵押附记',
          trigger: 'blur'
        }],
      },
      dyfsOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      dysxhOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      dyfwOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      dklxOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
      zgzqqdssOptions: [{
        "label": "选项一",
        "value": 1
      }, {
        "label": "选项二",
        "value": 2
      }],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}

</script>
<style>
</style>
